<template>
  <section  class="component export-detail">
    <span class="spnText">本批次导入成功{{ selectAgent }}条数据，失败{{ deptNameNum }}条</span>
    <el-button type="text" :disabled="!deptNameNum" @click="downFile()">下载失败详情</el-button>
    <data-form :model="model" @onSearch="refreshData" :page="pageService" @handleResetForm="handleResetForm">
      <template slot="inputs">
        <el-form-item label="客户号/账户号" prop="personalNo">
          <el-input v-model="model.personalNo"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="personalName">
          <el-input v-model="model.personalName"></el-input>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="dataSet.slice((this.page - 1) * this.size, (this.page - 1) * this.size + this.size)" @onPageChange="refreshData">
      <template slot="columns">
        <el-table-column label="操作" :min-width="$helper.getColumnWidth(3)">
          <template slot-scope="scope">
            <el-button @click="onClickDelete(scope.row)" type="text">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column label="客户号/账户号" :min-width="$helper.getColumnWidth(6)">
          <template slot-scope="scope">
            <span v-if="scope.row.personalNo">{{scope.row.personalNo}}</span>
            <span v-else>{{scope.row.accountNumber}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="personalName" label="客户姓名" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
      </template>
    </data-box>
    <div class="paginBox">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="paginn"
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.dataSet.length"
      >
      </el-pagination>
    </div>
    <div class="confirm-button">
      <el-button @click="onClickCommit">确定</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import { PageService } from "~/utils/page.service";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import { Vue, Component, Emit, Prop } from 'vue-property-decorator'
import { CustomFollowService } from "~/services/domain-service/custom-follow.service";
@Component({
  components: {}
})
export default class AddTag extends Vue {
  @Dependencies(PageService) private pageService: PageService;
  @Dependencies(CustomFollowService) private customFollowService: CustomFollowService;
  @Prop() private submitType;
  private model = {
    personalNo: "",
    personalName: "",
  }
  private selectAgent: any = ""
  private deptNameNum: any = ""
  private dataSet = []
  private listData = {
    customFollowDetailList: [],
    personalNameKey: {},
    personalNoKey: {},
    url: ""
  }
  private page: any = 1;
  private size: any = 10;
  @Emit('close') private emitClose() {}
  private update(data) {
    this.listData = data
    this.selectAgent = data.successCount
    this.deptNameNum = data.errorCount
    this.dataSet = data.customFollowDetailList
  }

  private handleSizeChange(val) {
    this.size = val;
  }

  private handleCurrentChange(val) {
    this.page = val;
  }

  // 搜索
  private refreshData () {
    const personalNoKey: any = { 'personalNo': this.model.personalNo,'personalName': this.model.personalName, 'personalNameKey': this.listData.personalNameKey, 'personalNoKey': this.listData.personalNoKey }
    this.customFollowService.searchFollowIn(personalNoKey).subscribe((data) => {
      this.dataSet = data.customFollowDetailList
    })
  }

  // 重置form
  private handleResetForm() {
    const personalNoKey: any = { 'personalNoKey': this.listData.personalNoKey }
    this.customFollowService.refreshFollowIn(personalNoKey).subscribe((data) => {
      this.dataSet = data.customFollowDetailList
    })
  }

  // 下载失败详情
  private downFile() {
    if(this.listData){
      this.$common.downloadFile(this.listData.url);
    }
  }

  // 删除
  private onClickDelete(row) {
    const personalNoKey: any = { 'personalNo': row.personalNo,'personalName': row.personalName, 'personalNoKey': this.listData.personalNoKey, 'caseNumber': row.caseNumber }
    this.customFollowService.deleteFollowIn(personalNoKey).subscribe((data) => {
      this.dataSet = data.customFollowDetailList
      this.listData.personalNoKey = data.personalNoKey
    })
  }

  private onClickCommit() {
    if(this.submitType === 'Enrollment'){
      this.InbtN()  // 入催
    } else if(this.submitType === 'OutReminder'){
      this.OutbtN()  // 出催
    }
    this.emitClose()
  }
  private InbtN() {
    const params = {'customFollowDetailList': this.dataSet}
    this.customFollowService.followIn(params).subscribe((data) => {
      this.emitClose()
      this.$emit('refreshData')
    })
  }
  private OutbtN() {
    const params = {'customFollowDetailList': this.dataSet}
    this.customFollowService.followOut(params).subscribe((data) => {
      this.emitClose()
      this.$emit('refreshData')
      
    })
  }
}
</script>

<style lang="less">
  .spnText {
    margin-right: 20px;
  }

  .paginBox {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .paginn {
      margin: 10px 15px 0px 0px;
      float: right;
    }
  }
</style>